<template>
  <div>
    <el-col style="margin-bottom: 20px">
      <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
      </div>
      <span>电催记录</span><br/><br/>
      <el-col v-for="(phone , index) in phones">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>记录{{index+1}}</span></el-col>
          <el-col :span="8"><span>催收人：{{phone.collectorStaffName}}</span></el-col>
          <el-col :span="8"><span>催收日期：{{phone.collectDate}}</span></el-col>
        </el-row>
        <el-row style="margin:10px 0 20px 0">
          <el-col>
            <span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">催收记录：{{phone.remark}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 20px">
      <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
      </div>
      <span>上门催收记录</span><br/><br/>
      <el-col v-for="visitRecord in records">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>催收人：{{visitRecord.collectorStaffName}}</span></el-col>
          <el-col :span="8"><span>催收日期：{{visitRecord.collectDate}}</span></el-col>
          <el-col :span="8"><span>催收结果：{{visitRecord.status}}</span></el-col>
        </el-row>
        <el-row style="margin:10px 0 20px 0">
          <el-col>
            <span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">催收记录：{{visitRecord.remark}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 40px">
      <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
      </div>
      <span>拖车记录</span><br/><br/>
      <el-col v-for="trailerRecord in trailerRecords">
        <div @click="refreshInfo(trailerRecord)">
          <el-row style="margin-bottom: 10px">
            <el-col :span="8"><span>执行人：{{trailerRecord.execStaffName}}</span></el-col>
            <el-col :span="8"><span>停放地：{{trailerRecord.location}}</span></el-col>
            <el-col :span="8"><span>拖车日期：{{trailerRecord.towingDate}}</span></el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="8"><span>拖车费用：{{trailerRecord.towingCost}}</span></el-col>
            <el-col :span="8"><span>停车费用：{{trailerRecord.parkingCost}}</span></el-col>
            <el-col :span="8"><span>车架号：{{trailerRecord.vin}}</span></el-col>
          </el-row>
          <el-row style="margin-top: 10px">
            <el-col :span="8"><span>发动机号：{{trailerRecord.engineNo}}</span></el-col>
            <el-col :span="8"><span>取车日期：{{trailerRecord.pickupDate}}</span></el-col>
            <el-col :span="8"><span>保管时间：{{trailerRecord.time}}</span></el-col>
          </el-row>
          <el-row style="margin:10px 0 20px 0">
            <el-col><span style="background-color: #F9FAFC;padding: 5px 0px 5px 10px">拖车记录：{{trailerRecord.towingRemark}}</span></el-col>
          </el-row>
        </div>
      </el-col>
    </el-col>
    <el-col style="margin-bottom: 40px">
      <div style="float:left;width: 6px;height: 20px; background:#58B7FF;margin-right: 9px">
      </div>
      <span>法院诉讼</span><br/><br/>
      <el-col v-for="court in courts">
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>函表交银行日期：{{court.indictmentSubmitDate}}</span></el-col>
          <el-col :span="8"><span>银行办证日期：{{court.registrateDate}}</span></el-col>
          <el-col :span="8"><span>法院受理日期：{{court.courtAcceptDate}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>执行法院：{{court.execCourt}}</span></el-col>
          <el-col :span="8"><span>立案日期：{{court.filingDate}}</span></el-col>
          <el-col :span="8"><span>立案法院：{{court.filingCourt}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>案号：{{court.caseNo}}</span></el-col>
          <el-col :span="8"><span>诉讼标的：{{court.lawsuitSubject}}</span></el-col>
          <el-col :span="8"><span>诉讼费用：{{court.lawsuitFee}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>律师费：{{court.attorneyFee}}</span></el-col>
        </el-row>
        <el-row style="margin-bottom: 20px">
          <el-col :span="8"><span>备注：{{court.remark}}</span></el-col>
        </el-row>
      </el-col>
      <div style="position:fixed;bottom: 0;left:200px;right:0;background-color: white" v-if="isShowCallDialog">
        <el-form :model="callRecordDialog" label-position="left" label-width="80px">
          <el-form-item label="催收人">
            <!-- <el-input v-model="visitRecordDialog.collectorStaffId" style="width:300px"></el-input> -->
            <el-select v-model="callRecordDialog.collectorStaffId" placeholder="请选择" style="width:300px">
              <el-option
                v-for="staff in staffList"
                :key="staff.value"
                :label="staff.label"
                :value="staff.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电催日期">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="callRecordDialog.collectDate" style="width:300px"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="催收记录">
            <el-input type="textarea" v-model="callRecordDialog.remark" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitCallRecord">保存</el-button>
            <el-button @click="isShowCallDialog=false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
    <el-dialog title="分配外勤" :visible.sync="assignFormVisible" :modal-append-to-body='false'>
      <el-form :model="form">
        <el-radio-group v-model="assignRadio">
          <el-radio v-for="(value, index) in groupList" :label="value.deptId">{{value.deptName}}</el-radio>
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assignFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitDistribute">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="新增上门催收记录" :visible.sync="visitFormVisible" :modal-append-to-body='false'>
      <el-form :model="visitRecordDialog" label-position="left" label-width="100px">
        <el-form-item label="催收人">
          <!-- <el-input v-model="visitRecordDialog.collectorStaffId" style="width:300px"></el-input> -->
          <el-select v-model="visitRecordDialog.collectorStaffId" placeholder="请选择" style="width:300px">
            <el-option
              v-for="staff in staffList"
              :key="staff.value"
              :label="staff.label"
              :value="staff.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催收日期">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="visitRecordDialog.collectDate" style="width:300px"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="催收记录">
          <el-input type="textarea" v-model="visitRecordDialog.remark" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="催收结果">
          <el-radio-group v-model="visitRecordDialog.status">
            <el-radio label="1">成功</el-radio>
            <el-radio label="0">失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitVisitRecord">确定</el-button>
          <el-button @click="visitFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增拖车记录" :visible.sync="carFormVisible" :modal-append-to-body='false'>
      <el-form :model="carRecordDialog" label-position="left" label-width="80px">
        <el-form-item label="执行人">
          <!-- <el-input v-model="carRecordDialog.execStaffId" style="width:300px" :disabled="isDisable"></el-input> -->
          <el-select v-model="carRecordDialog.execStaffName" placeholder="请选择" style="width:300px" :disabled="isDisable">
            <el-option
              v-for="staff in staffList"
              :key="staff.value"
              :label="staff.label"
              :value="staff.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停放地">
          <el-input v-model="carRecordDialog.location" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="拖车日期">
          <el-col :span="11">
            <el-date-picker :disabled="isDisable" type="date" placeholder="选择日期" v-model="carRecordDialog.towingDate" style="width:300px"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="拖车费用">
          <el-input v-model="carRecordDialog.towingCost" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="停车费用">
          <el-input v-model="carRecordDialog.parkingCost" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="拖车记录">
          <el-input type="textarea" v-model="carRecordDialog.towingRemark" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item label="取车日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="carRecordDialog.pickupDate" style="width:300px"></el-date-picker>
        </el-form-item>
        <el-form-item label="保管时间">
          <el-input v-model="carRecordDialog.time" style="width:300px" :disabled="isDisable"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCarRecord">确定</el-button>
          <el-button @click="carFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增法院诉讼" :visible.sync="courtFormVisible" :modal-append-to-body='false'>
      <el-form :model="courtRecordDialog" label-position="left" label-width="110px" style="max-height: 300px;overflow: auto">
        <el-form-item label="函表交银行日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="courtRecordDialog.indictmentSubmitDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="银行办证日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="courtRecordDialog.registrateDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="法院受理日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="courtRecordDialog.courtAcceptDate" ></el-date-picker>
        </el-form-item>
        <el-form-item label="执行法院">
          <el-input v-model="courtRecordDialog.execCourt" ></el-input>
        </el-form-item>
        <el-form-item label="立案日期">
            <el-date-picker type="date" placeholder="选择日期" v-model="courtRecordDialog.filingDate" ></el-date-picker>
        </el-form-item>
        <el-form-item label="立案法院">
          <el-input v-model="courtRecordDialog.filingCourt"></el-input>
        </el-form-item>
        <el-form-item label="案号">
          <el-input v-model="courtRecordDialog.caseNo" ></el-input>
        </el-form-item>
        <el-form-item label="诉讼标的">
          <el-input v-model="courtRecordDialog.lawsuitSubject"></el-input>
        </el-form-item>
        <el-form-item label="诉讼费用">
          <el-input v-model="courtRecordDialog.lawsuitFee"></el-input>
        </el-form-item>
        <el-form-item label="律师费用">
          <el-input v-model="courtRecordDialog.attorneyFee"></el-input>
        </el-form-item>
         <el-form-item label="备注">
          <el-input type="textarea" v-model="courtRecordDialog.remark" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitCourtRecord">确定</el-button>
          <el-button @click="courtFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-col>
      <el-button @click="assign">分配外勤</el-button>
      <div style="float: right">
        <el-button type="primary" @click="addPhone">新增电催记录</el-button>
        <el-button type="primary" @click="addVisit">新增上门催收记录</el-button>
        <el-button type="primary" @click="addCarRecord">新增拖车记录</el-button>
        <el-button type="primary" @click="addCourtRecord">新增法院诉讼</el-button>
      </div>
    </el-col>
  </div>
</template>
<script>
  import ElCol from "element-ui/packages/col/src/col";
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import $ from 'jquery'
  export default{
    name:'urgeManage',
    components: {
      ElButton,
      ElCol},
    data(){
      return{
        isShowCallDialog:false,
        staffList:[],
        isDisable:false,
        groupList:[],
        customerIdCard:'',
        orderNo:'',
        assignRadio:3,
        assignFormVisible:false,
        visitFormVisible:false,
        carFormVisible:false,
        courtFormVisible:false,
        phones:[],
        records:[],
        trailerRecords:[],
        courts:[],
        visitRecordDialog:{collectorStaffId:'',collectDate:'',remark:'',status:''},
        carRecordDialog:{execStaffName:'',location:'',towingDate:'',location:'',towingCost:'',parkingCost:'',pickupDate:'',towingRemark:''},
        courtRecordDialog:{indictmentSubmitDate:'',registrateDate:'',courtAcceptDate:'',execCourt:'',filingDate:'',
                    filingCourt:'',caseNo:'',lawsuitSubject:'',lawsuitFee:'',attorneyFee:'',remark:''},
        callRecordDialog:{collectorStaffId:'',collectDate:'',remark:''},
        content:this.$route.query.content,
        customerIdCard:this.$route.query.customerIdCard,
      }
    },
    methods: {
      assign(){
        this.assignFormVisible=true
      },

      addPhone(){
        this.isShowCallDialog = true
      },

      addVisit(){
        this.visitFormVisible=true
      },

      addCarRecord(){
        this.carFormVisible=true
        this.carRecordDialog={execStaffName:'',location:'',towingDate:'',location:'',towingCost:'',parkingCost:'',pickupDate:'',towingRemark:''}
        this.isDisable = false
      },

      addCourtRecord(){
        this.courtFormVisible=true
      },
      //新增电催记录
      submitCallRecord(){
        this.callRecordDialog.orderNo = this.content.orderNo
        this.callRecordDialog.customerIdCard = this.customerIdCard
        this.callRecordDialog.collectType = '0'
        this.$http.post("/overdue/detail/callingdebt",this.callRecordDialog)
        .then((response)=>{
          if(response.data.success){
            this.isShowCallDialog = false
            this.$message('添加成功')
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增上门催收记录
      submitVisitRecord(){
        console.log("content:"+JSON.stringify(this.content))
        this.visitRecordDialog.orderNo = this.content.orderNo
        this.visitRecordDialog.customerIdCard = this.customerIdCard
        this.visitRecordDialog.collectType = '1'
        console.log("visitRecordDialog:"+JSON.stringify(this.visitRecordDialog))
        this.$http.post("/overdue/detail/visitdebt",this.visitRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.$message('添加成功')
            this.visitFormVisible = false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增拖车记录
      submitCarRecord(){
        //console.log("carRecord:"+JSON.stringify(this.carRecordDialog))
        this.carRecordDialog.orderNo = this.content.orderNo
        this.carRecordDialog.customerIdCard = this.customerIdCard
        if(this.carRecordDialog.towingId==null){
          this.carRecordDialog.execStaffId = this.carRecordDialog.execStaffName
        }
        this.$http.post("/overdue/detail/towinghis",this.carRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.$message('添加成功')
            this.carFormVisible=false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //新增法院诉讼
      submitCourtRecord(){
        this.courtRecordDialog.orderNo = this.content.orderNo
        this.courtRecordDialog.customerIdCard = this.customerIdCard
        console.log("courtRecordDialog:"+JSON.stringify(this.courtRecordDialog))
        this.$http.post("/overdue/detail/lawsuit",this.courtRecordDialog)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.$message('添加成功')
            this.courtFormVisible = false
          }else{
            this.$message('添加失败')
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //根据overdueId查询页面详情
      getPageDetail(){
        let that = this
        console.log("customerIdCard:"+this.customerIdCard)
        
        console.log("urgeManage-content:"+this.content)
        this.orderNo = this.content.orderNo
        this.phones = this.content.callingDebtList
        $.each(this.content.visitDebtList, function(index , value){
          if(value.status=='0'){
            value.status = '失败'
          }else{
            value.status = '成功'
          }
        })
        this.records = this.content.visitDebtList
        this.courts = this.content.lawsuitHisList
        this.trailerRecords = this.content.towingHisList
      },
      //获取分配外勤的分组列表
      getGroupList(){
        this.$http.get("/overdue/outWorkerDept/list")
        .then((response)=>{
          console.log("groupList:"+response)
          this.groupList = response.data.data
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //提交分组数据
      SubmitDistribute(){
        var group = {}
        group.orderNo = this.orderNo
        group.customerIdCard = this.customerIdCard
        group.deptId = this.assignRadio
        //console.log("assignRadio:"+this.assignRadio)
        this.$http.post("/overdue//detail/distribute/visit",group)
        .then((response)=>{
          console.log(response)
          if(response.data.success){
            this.assignFormVisible = false
            this.$message("提交成功")
          }else{
            this.$message("提交失败")
          }
        })
        .catch(function(error){
          console.log(error)
        })
      },
      //保存拖车记录取车日期
      refreshInfo(record){
        this.carFormVisible = true
        this.isDisable = true
        console.log("record:"+JSON.stringify(record))
        this.carRecordDialog = record
      },
      getStaffList(){
        let that = this
        this.$http.get("/overdue/assetProtect/outWorker/list")
        .then((response)=>{
          console.log("Staff:"+JSON.stringify(response.data.data))
          $.each(response.data.data, function(index, value){
            that.staffList.push({value:value.staffId,label:value.staffName})
          })
        })
        .catch(function(error){
          console.log(error)
        })
      }
    },

    mounted(){
      this.phones.splice(-1,1)
      this.records.splice(-1,1)
      this.courts.splice(-1,1)
      this.trailerRecords.splice(-1,1)
      this.getPageDetail()
      this.getGroupList()
      this.getStaffList()
    }
  }
</script>

<style>
  /* .demo-table-expand label {
     font-weight: bold;
   }*/
</style>
